import React from 'react';
import { Form, Space, Input, Button, Row, Col } from 'antd';
import { DeleteOutlined, MinusCircleOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { useTranslation } from 'react-i18next';

export default function Headers() {
  const { t } = useTranslation('datasourceManage');
  return (
    <div data-oid='2xhtqzd'>
      <Form.List name={['http', 'headers']} data-oid='f:js-.l'>
        {(fields, { add, remove }) => (
          <>
            <div className='page-title' style={{ marginTop: '8px' }} data-oid='abfkuq-'>
              {t('form.headers')} <PlusCircleOutlined style={{ marginLeft: '16px', cursor: 'pointer', fontSize: '14px' }} onClick={() => add()} data-oid='wv1s2vs' />
            </div>
            {fields.map(({ key, name }) => (
              <Row gutter={16} align='middle' key={key} data-oid=':89gg30'>
                <Col flex={1} data-oid='dneyo8u'>
                  <Form.Item label='Header' name={[name, 'key']} data-oid='rgky-cr'>
                    <Input placeholder='X-Custom-Header' data-oid='r8up08h' />
                  </Form.Item>
                </Col>
                <Col flex={1} data-oid='fgfxn.m'>
                  <Form.Item label='Value' name={[name, 'value']} data-oid='_abt.ru'>
                    <Input placeholder='Header Value' data-oid='26s8hxe' />
                  </Form.Item>
                </Col>
                <Col data-oid='2lchf.e'>
                  <MinusCircleOutlined style={{ cursor: 'pointer', fontSize: '14px', margin: '8px 16px 0 0' }} onClick={() => remove(name)} data-oid='348gc-z' />
                </Col>
              </Row>
            ))}
          </>
        )}
      </Form.List>
    </div>
  );
}
